<template>
    <BasicModal
      v-bind="$attrs"
      :title="title"
      :showCancelBtn="showCancelBtn"
      :showOkBtn="showOkBtn"
      :destroyOnClose="destroyOnClose"
      :helpMessage="helpMessage"
      :width="width"
      :minHeight="minHeight"
      :zIndex="zIndex"
      @register="register"
      @ok="ok"
      @cancel="cancel"
      :closeFunc="closeFunc"
      @visible-change="visibleChange"
    >
        <slot></slot>
        <template #footer>
            <slot name="modalFooter"></slot>
        </template>
    </BasicModal>
  </template>
  <script lang="ts" setup>
  import { BasicModal, useModalInner } from "/@/components/Modal";
  import { ref, withDefaults, toRefs } from "vue";
  const [ register ] = useModalInner();
  const emits = defineEmits(['ok','cancel','register','close','visibleChange'])
  const props = withDefaults(defineProps<{
    title:string
    helpMessage?:string,
    width?:string,
    destroyOnClose?:boolean,
    minHeight?:number,
    zIndex?:number,
    showCancelBtn?: boolean,
    showOkBtn?: boolean
  }>(),{
    title:'',
    helpMessage:'',
    width:'1000px',
    destroyOnClose : true,//是否在弹关闭的时候销毁
    minHeight : 400,
    zIndex: 1000,
    showCancelBtn: true,
    showOkBtn: true
  })

  const { title, helpMessage, width, destroyOnClose, minHeight, zIndex } = toRefs(props);

  const ok = ()=>{
    emits("ok")
  }

  const cancel = ()=>{
    emits("cancel");
  }

  const visibleChange = (e:boolean) => {
    emits("visibleChange",e);
  }

  async function closeFunc(){
    emits('close');
    return true;
  }

  </script>
  <style lang="less">
  .m-8 {
    margin-top: 18px;
  }
  </style>
  